<script setup>
import Tabbarstudent from "../../pages/componentstudent/Tabbarstudent.vue";
import { ref,computed } from 'vue';


const currentLocation = ref('');
const mockLocations = [
  '山西省太原市尖草坪区中北大学',
];
let currentMockIndex = 0;
const simulateLocation = () => {
  currentLocation.value = mockLocations[currentMockIndex];
  currentMockIndex = (currentMockIndex + 1) % mockLocations.length; // 循环切换模拟位置
};

const currentDate = computed(() => {
  const date = new Date();
  return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
});

const temperatureRanges = ref(['36.0 - 36.5℃', '36.5 - 37.0℃', '≥37.3℃']);
const healthRanges = ref([['健康', '异常'], [ '发热', '呼吸道症状', '乏力', '畏寒', '腹泻', '结膜充血']]);
const healthCodeColors = ref(['绿码', '黄码', '红码']);


const selectedTemp = ref({
  yesterdayNoonTemp: '',
  yesterdayNightTemp: '',
  todayMorningTemp: '',
});
const selectedHealthCodeColor = ref('');
const multiIndex = ref([0, -1]); // 初始选择“健康”，异常项初始不选



const handlePickerChange = (key, e) => {
  selectedTemp.value[key] = temperatureRanges.value[e.detail.value];
};

const handleMultiChange = (e) => {
  multiIndex.value = e.detail.value;
};

const handleColumnChange = (e) => {
  const { column, value } = e.detail;
  if (column === 0 && value === 0) {
    multiIndex.value = [0, -1]; // 切换到“健康”时，重置异常项选择
  }
};

const submitForm = () => {
  // 简单校验，实际可根据需求完善
  if (
      !selectedTemp.value.yesterdayNoonTemp ||
      !selectedTemp.value.yesterdayNightTemp ||
      !selectedTemp.value.todayMorningTemp ||
      !selectedHealthCodeColor.value
  ) {
    uni.showToast({
      title: '请完善所有信息',
      icon: 'none',
    });
    return;
  }
  uni.navigateTo({
    url: 'jjiankang_success',
  });
};
</script>

<template>
<view>
  <view id="jiankang">
    <view class="container">
      <view class="current-date">当前日期：{{ currentDate }}</view>
      <view class="instruction">
        全体学生每天早中晚各完成一次体温测量（晨9:00前、午14:00前、晚21:00前），如育出现身体不适、发热（体温≥37.3℃），应第一时间联系辅导员及校医院报告。<br />
        每天上午10点前在系统上投前一天午检、晚检和当天早检的体温数据。
      </view>
      <view class="form-item">
        <view class="label">昨日午检体温</view>
        <picker
            class="picker"
            :range="temperatureRanges"
            @change="(e) => handlePickerChange('yesterdayNoonTemp', e)"
        >
          {{ selectedTemp.yesterdayNoonTemp || '请选择体温范围' }}
        </picker>
      </view>
      <view class="form-item">
        <view class="label">昨日晚检体温</view>
        <picker
            class="picker"
            :range="temperatureRanges"
            @change="(e) => handlePickerChange('yesterdayNightTemp', e)"
        >
          {{ selectedTemp.yesterdayNightTemp || '请选择体温范围' }}
        </picker>
      </view>
      <view class="form-item">
        <view class="label">今日早检体温</view>
        <picker
            class="picker"
            :range="temperatureRanges"
            @change="(e) => handlePickerChange('todayMorningTemp', e)"
        >
          {{ selectedTemp.todayMorningTemp || '请选择体温范围' }}
        </picker>
      </view>
      <view class="form-item">
        <view class="label">返校本人健康情况</view>
        <!-- 重点修改：添加 @columnchange 事件监听列变化 -->
        <picker
            class="picker"
            mode="multiSelector"
            :range="healthRanges"
            :value="multiIndex"
            @change="handleMultiChange"
            @columnchange="handleColumnChange"
        >
          {{
            multiIndex[0] === 0
                ? healthRanges[0][multiIndex[0]]
                : (multiIndex[1] !== -1
                    ? `${healthRanges[0][multiIndex[0]]}、${healthRanges[1][multiIndex[1]]}`
                    : '请选择异常状况')
          }}
        </picker>
      </view>
      <view class="form-item" >
        <text class="label" >当前位置:</text>
        <view
            @click="simulateLocation"
            style="border: 1px solid #dddddd; border-radius: 4px; padding: 12px; font-size: 14px;height: 10px; width: 200px; cursor: pointer; color: #000000;"
        >
          {{ currentLocation || '点击定位' }}
        </view>
        <view class="form-item">
          <view class="label">当前健康码颜色</view>
          <picker class="picker" :range="healthCodeColors" @change="(e) => selectedHealthCodeColor = healthCodeColors[e.detail.value]">
            {{ selectedHealthCodeColor || '请选择当前健康码颜色' }}
          </picker>
        </view>
      <button class="submit-btn" @click="submitForm">提交</button>
    </view>
 <Tabbarstudent :cur-index="0"></Tabbarstudent>
</view>
</view>
</view>
</template>

<style scoped>
#jiankang{
  width: 100%;
  height: calc(100%- 50px);
  background-color:#F0F3FA;
}
.container {
  padding: 20px;
}
.current-date{
  font-size: 28rpx;
  color: #333;
  height: 20px;
}
.instruction {
  font-size: 14px;
  color: #666;
  height: 20px;
  line-height: 20px;
  margin-bottom: 90px;
}
.form-item {
  margin-bottom: 30px;
  height: 50px;
}
.label {
  font-size: 14px;
  margin-bottom: 1px;
  height: 20px;
}
.picker, .input {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 12px;
  font-size: 14px;
  height: 10px;
}
.submit-btn {
  background-color: #007AFF;
  color: #fff;
  border-radius: 4px;
  padding: 12px;
  font-size: 16px;
}
uni-view{
  height: 100%;
}
</style>